<template>
  <div>
    <!-- 没有子菜单 -->
    <div v-if="item.show&&!item.children">
      <el-menu-item
        v-if="item.show"
        :index="item.path||item.title"
      >
        <i
          v-show="item.meta.icon"
          :class="item.meta.icon"
        />
        <span
          v-if="item.meta&&item.meta.title"
          v-text="item.meta.title"
          slot="title"
        />
      </el-menu-item>
    </div>
    <!-- 有切有多级子菜单 -->
    <div
      class="router-item"
      v-else-if="item.show&&item.children"
    >
      <!-- 多条子菜单 -->
      <el-submenu
        v-if="item.list"
        :index="item.path"
      >
        <template slot="title">
          <i
            v-show="item.meta.icon"
            :class="item.meta.icon"
          />
          <span
            v-if="item.meta&&item.meta.title"
            v-text="item.meta.title"
            slot="title"
          />
        </template>
        <template v-for="child in item.children">
          <div
            v-if="child.show"
            :key="child.path"
          >
            <sidebar-item
              v-if="child.children&&child.children.length>0"
              :item="child"
              :key="child.path"
            />
            <el-menu-item
              v-else
              :index="child.path"
            >
              <i
                v-show="child.meta.icon"
                :class="child.meta.icon"
              />
              <span
                v-text="child.meta.title"
                slot="title"
              />
            </el-menu-item>
          </div>
        </template>
      </el-submenu>
      <el-menu-item
        v-else-if="hasOneShowChild(item.children) && !onlyOneChild.children"
        :index="item.path"
      >
        <i
          v-show="onlyOneChild.meta.icon"
          :class="onlyOneChild.meta.icon"
        />
        <span
          v-if="onlyOneChild.meta&&onlyOneChild.meta.title"
          v-text="onlyOneChild.meta.title"
          slot="title"
        />
      </el-menu-item>
      <!-- 多条子菜单 -->
      <el-submenu
        v-else
        :index="item.path"
      >
        <template slot="title">
          <i
            v-show="item.meta.icon"
            :class="item.meta.icon"
          />
          <span
            v-if="item.meta&&item.meta.title"
            v-text="item.meta.title"
            slot="title"
          />
        </template>
        <template v-for="child in item.children">
          <div
            v-if="child.show"
            :key="child.path"
          >
            <sidebar-item
              v-if="child.children&&child.children.length>0"
              :item="child"
              :key="child.path"
            />
            <el-menu-item
              v-else
              :index="child.path"
            >
              <i
                v-show="child.meta.icon"
                :class="item.meta.icon"
              />
              <span
                v-text="child.meta.title"
                slot="title"
              />
            </el-menu-item>
          </div>
        </template>
      </el-submenu>
    </div>
  </div>
</template>

<script>
export default {
  name: "SidebarItem",
  props: {
    item: { type: Object, required: true }
  },
  data() {
    return {
      onlyOneChild: null
    };
  },
  methods: {
    hasOneShowChild(children) {
      const showChild = children.filter(item => {
        console.log("!item.show && !item.list: ", !item.show);
        if (!item.show) {
          return false;
        } else {
          this.onlyOneChild = item;
          return true;
        }
      });
      if (showChild.length === 1) {
        return true;
      }
      return false;
    }
  }
};
</script>

<style lang="scss" scoped>
.el-menu-item [class^="iconfont"],
.el-submenu__title [class^="iconfont"] {
  margin-right: 5px;
  width: 24px;
  text-align: center;
  font-size: 18px;
  vertical-align: middle;
  color: #fff;
}
.el-menu-item.is-active {
  color: #fff !important;
  background: #409eff !important;
}
</style>
